<template>
  <!-- <div> -->
  <div class="banner">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      background-color="#fff"
      text-color="#333"
      active-text-color="#950c00"
      @select="handleSelect"
      router
    >
      <el-menu-item index="/flowerPage">
        内容修改
      </el-menu-item>
      <el-menu-item index="/orderPage">
        订单管理
      </el-menu-item>
      <div class="flex-grow"></div>
      
      <el-menu-item index="/login">
        Administration
      </el-menu-item>
      <el-menu-item index="/about">
        About
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  import {ref} from 'vue'

  export default {
    setup() {
      const activeIndex = ref('1');
      const handleSelect = (key, keyPath) => {
        console.log(key, keyPath)
      }

      return {
        activeIndex,
        handleSelect
      }
    }
  }
</script>

<style scoped>
  .banner {
    position: fixed;
    left:0;
    right: 0;
    z-index: 999;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .banner li {
    display: inline-block;
    font-size: 1.2em;
    text-decoration: none;
    text-shadow:2px 2px 1px #eee;
  }
  .banner div {
    display: flex;
    justify-content: space-around;
  }
  .bannerLeft {
    width: 50%;
  }
  .bannerRight {
    width: 20%;
  }
</style>